{include file="public/header-static"/}
{include file="public/sidebar"/}


<div id="main">
    {include file="public/header"/}
    <main class="main-content">
        <div class="container">
            <div class="page-header">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item">
                            <a href="#">首页</a>
                        </li>
                        <li class="breadcrumb-item active" aria-current="page">帖子设置  </li>
                    </ol>
                </nav>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-body">
                            <form action="{:url('/console/postAdd')}" method="post" target="iframe_form" enctype="multipart/form-data" >

                                <div class="form-group row">
                                    <label class="col-sm-1 col-form-label">帖子分类</label>
                                    <div class="input-group col-sm-8">
                                        <select name="pcid" class="form-control" id="level1" aria-required="true" style="width:37.5%;">
                                            <option value="">请选择帖子分类</option>

                                            {volist name="postCate" id="vo"}
                                            <option value="{$vo.id}" >{$vo.name}</option>
                                            {/volist}
                                        </select>
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label class="col-sm-1 col-form-label">帖子图片</label>
                                    <div class="col-sm-8">
                                        <input type="hidden" class="form-control images" name="images" required="" aria-required="true">
                                        <button type="button" class="btn btn-secondary" id="images">上传图片</button><span style="color: #6c757d">&nbsp;（ 多图，默认第一张为封面图 ）</span>

                                        <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                                            预览图：
                                            <div class="layui-upload-list uploader-list" style="overflow: auto;" id="uploader-images">
                                            </div>
                                        </blockquote>
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label class="col-sm-1 col-form-label">VIDEO</label>
                                    <div class="input-group col-sm-4">
                                        <button type="button" class="btn btn-secondary" id="video">上传VIDEO</button><span style="color: #6c757d;line-height: 2.188rem">（ 文件大小：10M以内）</span>

                                        <input type="hidden" class="form-control video" name="video" required="" aria-required="true" >
                                        <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;width: 25rem">
                                            预览视频：
                                            <div class="layui-upload-list" id="video-list" style="display: flex;margin-top: 0.625rem">
                                            </div>
                                        </blockquote>
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label class="col-sm-1 col-form-label">帖子描述</label>
                                    <div class="col-sm-8">
                                        <textarea id="custom_text" placeholder="帖子描述"  name="content" rows="5" cols="91"></textarea>
                                    </div>
                                </div>

<!--                                <div class="form-group row">-->
<!--                                    <label for="" class="col-sm-1 col-form-label">操作</label>-->
<!--                                    <div class="col-sm-8">-->
<!--                                        <div class="custom-control custom-switch custom-checkbox-secondary custom-control-inline">-->
<!--                                            <input checked name="status" type="checkbox"   class="custom-control-input" id="customSwitchInline2">-->
<!--                                            <label class="custom-control-label" for="customSwitchInline2">状态[是否展示]</label>-->
<!--                                        </div>-->
<!--                                    </div>-->
<!--                                </div>-->

                                <button type="submit" class="btn btn-secondary">提交</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </main>

    {include file="public/footer"/}

    <script>

        // 各种上传
        layui.use('upload', function() {
            var $ = layui.jquery
                , upload = layui.upload;

            // 封面图片上传
            upload.render({
                elem: '#images'
                ,url: '{:url("/console/imageReturn")}?path=postList'
                ,multiple: true
                ,before: function(obj){
                    layer.msg('帖子图片上传中...', {
                        icon: 16,
                        shade: 0.05,
                        time: 0
                    });
                }
                ,done: function(res){
                    layer.close(layer.msg());//关闭上传提示窗口
                    // console.log(res)
                    //上传完毕
                    var images = $('.images').val();
                    if (images != '') {
                        images += ',' + res.data.src;
                    } else {
                        images = res.data.src;
                    }
                    $('.images').val(images);
                    $('#uploader-images').append(
                        '<div id="" class="file-iteme">' +
                        '<div class="handle" src="'+ res.data.src +'"><span class="fa fa-times" style="border-radius: 0.375rem 0.375rem 0 0;"></span></div>' +
                        '<img style="width: 5rem;height: 5rem;border-radius: 0.375rem;" src='+ res.data.src +'>' +
                        // '<div class="info">' + res.data.name + '</div>' +
                        '</div>'
                    );
                }
            });

            // 视频上传
            upload.render({
                elem: '#video'
                ,url: '{:url("/console/videoReturn")}?path=postList'
                ,accept: 'video' // 视频类型
                ,size: 1024*10 // 限定大小，最大10M
                ,before: function(obj){ //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
                    layer.msg('video上传中...', {
                        icon: 16,
                        shade: 0.05,
                        time: 0
                    });
                }
                ,done: function(res, index, upload){
                    console.log(res);
                    layer.close(layer.msg());//关闭上传提示窗口
                    if (res.code != 1) {
                        return toastr.error(res.msg);
                    }

                    var video = $('.video').val();
                    if (video != '') {
                        // 删除旧视频
                        delImageOrVideo(video);
                        $('#video-list').children('.videos').remove();
                    }
                    $('.video').val(res.data);
                    // 上传完毕
                    $('#video-list').append(
                        '<video width="320" src="'+res.data+'" class="videos" controls="controls" loop></video>'
                    );
                }
                ,error: function(index, upload){
                    layer.close(layer.msg());//关闭上传提示窗口
                }
            });

        });

        // 视频删除
        function delImageOrVideo(path) {
            $.post('{:url("/console/delImageOrVideo")}', {path:path} ,function (res) {
                console.log(res)
            });
        }

        // 图片显示删除
        $(document).on("mouseenter mouseleave", ".file-iteme", function(event){
            if(event.type === "mouseenter"){
                //鼠标悬浮
                $(this).children(".info").fadeIn("fast");
                $(this).children(".handle").fadeIn("fast");
            }else if(event.type === "mouseleave") {
                //鼠标离开
                $(this).children(".info").hide();
                $(this).children(".handle").hide();
            }
        });

        // 删除图片
        $(document).on("click", ".file-iteme .handle", function(event){
            console.log($(this).attr('src'));
            delImageOrVideo($(this).attr('src'));
            $(this).parent().remove();
        });

    </script>


</div>